<template>
  <transition name="bounce" mode="out-in">
    <div class="mh-container">
      <mh-header headName="完善资料"> </mh-header>
      <div class="mui-content">
        <div class="mh-form">
          <ul>
            <li class="mh-form-item item-lg">
              <label>头像</label>
              <div class="upload-box">
                <div class="upload-inner">
                  <!-- <span class="mui-icon mui-icon-plusempty"></span> -->
                  <img :src="portrait">
                  <input style="opacity: 0;position:absolute;top:0;right:0;" type="file" accept="image/*" :value="fileName" @change='selectImg' />
                  <input type="hidden" v-model="portrait">
                </div>
              </div>
            </li>
            <li class="mh-form-item">
              <label>昵称</label>
              <div class="mh-input-row">
                <input type="text" v-model="nickname" placeholder="请输入昵称">
              </div>
            </li>
            <li class="mh-form-item">
              <label>性别(选择后不可更改)</label>
              <div class="mh-input-row">
                <label class="sex-li">
                  <input type="radio" v-model="sex" value="0"><span></span>男
                </label>
                <label class="sex-li">
                  <input type="radio" v-model="sex" value="1"><span></span>女
                </label>
              </div>
            </li>
            <li class="mh-form-item" @tap="openCityPicker">
              <label>居住地</label>
              <div class="mh-input-row">
                <input type="text" v-model="liveAdd" placeholder="请选择居住地" readonly>
              </div>
            </li>
            <li class="mh-form-item" @tap="openBirthPicker">
              <label>出生年月日时</label>
              <div class="mh-input-row">
                <input type="text" v-model="birthday" placeholder="请选择出生年月日时" readonly>
              </div>
            </li>
            <li class="mh-form-item" @tap="openHeightPicker">
              <label>身高</label>
              <div class="mh-input-row">
                <input type="text" v-model="height" placeholder="请选择身高" readonly>
              </div>
            </li>
            <li class="mh-form-item" @tap="openIncomePicker">
              <label>月收入</label>
              <div class="mh-input-row">
                <input type="text" v-model="income" placeholder="请选择月收入" readonly>
              </div>
            </li>
            <li class="mh-form-item" @tap="openEducatePicker">
              <label>学历</label>
              <div class="mh-input-row">
                <input type="text" v-model="education" placeholder="请选择学历" readonly>
              </div>
            </li>
            <li class="mh-form-item" @tap="openMarrigePicker">
              <label>婚姻状况</label>
              <div class="mh-input-row">
                <input type="text" v-model="marriage" placeholder="请选择婚姻状况" readonly>
                <input type="hidden" v-model="marriageVal">
              </div>
            </li>
          </ul>
        </div>
        <div class="mui-content-padded lg-btn-box">
          <button type="button" class="mui-btn-block mh-btn" @click="completeProfile">完成</button>
        </div>
      </div>
      <div class="cropper-box" v-show='cropper'>
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixedBox="option.fixedBox"
          ></vueCropper>
        </div>
        <div class="cropper-btn">
          <span @click='closeBtn'>取消</span>
          <span class="cur" @click='uploadImg'>确定</span>
        </div>
      </div>

    </div>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  import {cityData} from "@/assets/js/city.data-3";
  import { VueCropper }  from 'vue-cropper';

  export default {
    name: "new-pwd",
    data () {
      return {
        cropper: false,
        option: {
          img: '',
          size: 1,
          outputType: 'png',
          canMove: true, 
          original: false, 
          canMoveBox: true, 
          autoCrop: true, 
          autoCropWidth: 200, 
          autoCropHeight: 200, 
          fixedBox: true
        },
        fileName: '',
        avatar: '',
        nickname: '',
        liveAdd: '',
        birthday: '',
        height: '',
        income: '',
        education: '',
        marriage: '',
        marriageVal: '',
        sex: 1,
        portrait: '',
        province: '',
        city: '',

        heightList: [{
          value:'1',
          text:'150cm - 160cm'
        },{
          value:'2',
          text:'160cm - 170cm'
        },{
          value:'3',
          text:'170cm - 180cm'
        },{
          value:'4',
          text:'180cm - 190cm'
        }],
        incomeList: [{
          value: '1',
          text: '3000 - 5000'
        },{
          value: '2',
          text: '5000 - 8000'
        },{
          value: '3',
          text: '8000 - 15000'
        },{
          value: '4',
          text: '15000以上'
        }],
        educateList: [{
          value: '1',
          text: '小学'
        },{
          value: '2',
          text: '初中'
        },{
          value: '3',
          text: '高中'
        },{
          value: '4',
          text: '大专'
        },{
          value: '5',
          text: '本科'
        },{
          value: '6',
          text: '硕士'
        },{
          value: '7',
          text: '博士'
        }],
        //1：单身；2：离异；3：丧偶；4：已婚；5：保密
        marriageList: [{
          value:'1',
          text:'单身'
        },{
          value:'2',
          text:'离异'
        },{
          value:'3',
          text:'丧偶'
        },{
          value:'4',
          text:'已婚'
        },{
          value:'5',
          text:'保密'
        }]
      }
    },
    methods: {
      closeBtn(){
        this.cropper = false;
        this.fileName = '';
      },
      selectImg(e){
        console.log(e.target)
        let self = this;
        let file = e.target.files[0];
        let reader = new FileReader();
        let imgUrlBase64 = '';
        if (file) {
            //将文件以Data URL形式读入页面  
            imgUrlBase64 = reader.readAsDataURL(file);
            reader.onload = function (e) {
              console.log(reader.result)
              self.option.img = reader.result;
              self.cropper = true;
            }
        }
      },
      uploadImg:function(){
        this.cropper = false;
        let self = this;
        let formData = new FormData();
        this.$refs.cropper.getCropBlob((data) => {
          formData.append('file', data);
          formData.append('token', window.localStorage.getItem("uploadToken"));
          mui.toast('上传中');
          MH_API.uploadImg(formData).then(res => {
            if (res.key) {
              mui.toast('上传成功');
              self.portrait = MH_API.QN_url+res.key;
            }
          })
        })

      },
      completeProfile () {
        if(this.portrait=='' || this.nickname=='' || this.birthday=='' || this.height=='' || this.income==''){
          mui.toast('请完善信息');
          return false
        }
        let params = {
          portrait: this.portrait,
          nickname: this.nickname,
          sex: this.sex,
          province: this.province,
          city: this.city,
          birthday: this.birthday,
          height: this.height,
          income: this.income,
          education: this.education,
          marriage: this.marriage
        };
        console.log(params);
        // this.$router.push({path: '/meet'})
        // return false
        MH_API.perfectInfo(params).then(res => {
          if (res.status === 200) {
            mui.toast('提交成功');
            this.$router.push({path: '/meet'})
          }
          else{
            mui.toast(res.msg);
          }
        })
      },
      _getParam (obj, param) {
        return obj[param] || '';
      },
      // 选择居住地
      openCityPicker () {
        let _this = this;
        let cityPicker = new mui.PopPicker({
          layer: 2
        });
        cityPicker.setData(cityData);
        cityPicker.show(function(items) {
          _this.province = items[0].text;
          _this.city = items[1].text;
          _this.liveAdd = `${_this._getParam(items[0], 'text')}${_this._getParam(items[1], 'text')}`;
        });
      },
      // 选择出生日期
      openBirthPicker () {
        let _self = this;
        let options = {type:"hour",beginYear:1960};
        let dtPicker = new mui.DtPicker(options);
        dtPicker.show(function (selectItems) {
          console.log(selectItems.value);
          _self.birthday = selectItems.value;
        })
      },
      // 选择身高
      openHeightPicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.heightList);
        picker.show(function (selectItems) {
          // console.log(selectItems[0].text);
          // console.log(selectItems[0].value);
          _self.height = selectItems[0].text;
        })
      },
      // 选择收入
      openIncomePicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.incomeList);
        picker.show(function (selectItems) {
          // console.log(selectItems[0].text);
          // console.log(selectItems[0].value);
          _self.income = selectItems[0].text;
        })
      },
      // 选择学历
      openEducatePicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.educateList);
        picker.show(function (selectItems) {
          _self.education = selectItems[0].text;
        })
      },
      // 选择婚姻状况
      openMarrigePicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.marriageList);
        picker.show(function (selectItems) {
          _self.marriage = selectItems[0].text;
          _self.marriageVal = selectItems[0].value;
        })
      }
    },
    components: {
      MhHeader,
      VueCropper
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/css/mixin';
  .cropper-box{ position:absolute; top:0; left:0; z-index:999; background-color:#000; width:100%; height:100%;}
  .cropper{ width:100%; height:50rem;}
  .cropper-btn{ display:flex; padding-top:2rem;justify-content:center;}
  .cropper-btn span{ display:inline-block; line-height:4rem; padding:0 2rem; border-radius:0.5rem; margin: 0 2rem; color:#fff; font-size:1.4rem; background-color:#a9a9a9;}
  .cropper-btn span.cur{ background-color:#e685aa;}
  .mui-content {background: #fff;}
  .mui-input-row.label-lg>label {width: 50%}
  .mui-input-row {
    display: flex;
    &>input {
      flex: 1;
      text-align: right;
    }
    &>div {flex: 1}
  }
  .sex-li{}
  .sex-li input{ opacity: 0}
  .sex-li input + span{ display:inline-block; width:1.6rem; height:1.6rem;background:url(../../assets/images/ico/icon-radio.png) no-repeat 0 0; background-size:cover; position:relative; top: 0.3rem; margin-right:1rem;}
  .sex-li input:checked + span{ background-image:url(../../assets/images/ico/icon-radio-check.png);}
  .mh-btn {margin-top: 4.5rem;}
  .mh-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    line-height: 5rem;
    padding: 1px 2rem;
    border-bottom: 1px solid #eee;
    color: #666;
    font-size: 1.4rem;
    overflow: hidden;
    &.item-lg {
      height: 6.5rem;
      line-height: 6.5rem;
    }
  }
  .upload-box {
    position: relative;
    width: 5rem;
    height: 5rem;
    background: #eee;
    color: #dedede;
    text-align: center;
    .upload-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .upload-inner img{ width:100%;}
  }
  .mh-input-row {
    height: 100%;
    &>input {
      margin: 0;
      border: 0;
      text-align: right ;
    }
  }
</style>
